<template>
<div class="Sam" id="Sam">
    <el-container>
        <!-- 卡片 -->
  <el-aside width="200px">
      <el-card class="box-card" shadow="always">
  <div slot="header" class="clearfix">
      <!-- 标题 -->
      <div class="samheader">
           {{$t("message.center.header")}} 
      </div>
    <!-- 导航栏 -->
<el-row class="tac">
  <el-col :span="12">
    <el-menu 
    :default-active="activepathname"  
      class="el-menu-vertical-demo"
      text-color="#4e6d9d"
      router unique-opened
      >
      <el-menu-item v-for="(item,i) in navList" :index="item.name" :key="i" @click="getbreadcrumbpath(item)">
          <i>
              <img :src='item.imgurl' >
          </i>
          <span class="MuneList" slot="title">{{item.titel}}</span> 
      </el-menu-item>
    </el-menu> 
  </el-col>
  
</el-row>
  </div>
</el-card>
</el-aside> 
   <el-container>
      <el-header>
       <div class="breadcrumb">
           
            <el-breadcrumb separator="/">
             <span class="localtionicon"><img src='../../../assets/config/center/location(1).png'/> </span>
            <el-breadcrumb-item>{{$t("message.center.breadcrumb.crumb1")}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{breadcrumbpath}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
      </el-header>
    <el-main> 
       <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</div>
</template>
<script>
import antenna from "../../../assets/config/center/settings_input_antenna(1).png"
import nat from "../../../assets/config/center/air-play(1).png"
import router from "../../../assets/config/center/router(1).png"
import accessterminal from "../../../assets/config/center/storage(1).png"
  export default {
   name: 'Sam',
      data(){
          return{
            breadcrumbpath:this.$t('message.center.Menu.menu1'),
            activepathname:this.$route.path,
            //菜单栏
            navList:[
                {name:'/config/center/antenna',imgurl:antenna,titel:this.$t('message.center.Menu.menu1')},
                {name:'/config/center/nat',imgurl:nat,titel:this.$t('message.center.Menu.menu2')},
                {name:'/config/center/router',imgurl:router,titel:this.$t('message.center.Menu.menu3')},
                {name:'/config/center/accessterminal',imgurl:accessterminal,titel:this.$t('message.center.Menu.menu4')}
            ]
          }
      },
      created: async function(){
      await this.$store.dispatch('getantennas',{})
      this.$store.dispatch('getsatellite_name',{})
      this.$store.dispatch('getnatdata',{})
      this.$store.dispatch('getroutersdata',{})
      this.$store.dispatch('getaccessterminalsdata',{})
      // this.$store.dispatch('accgetantennas',{})
     
       
  },
    methods: {
      getbreadcrumbpath(item){
        this.breadcrumbpath = item.titel
        console.log(this.breadcrumbpath);
        this.activepathname = item.name
        console.log( this.$route.path);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
/* 这里设置导航栏被激活的时候  */
 .el-menu-item.is-active {
  background: #eaeef3 !important;
}
 .el-submenu__title.is-active {
  background:#eaeef3 !important;
}
aside.el-aside{
    width: 300px !important;
    height: 100% !important;
    overflow: hidden;
}
ul.el-menu-vertical-demo.el-menu{
        text-align: left;
        margin: 0px auto;
}
.Sam{
    height: 100% !important;    
}
.el-card.box-card.is-always-shadow{
 height: 100% !important;
}
.el-col.el-col-12{
    width: 300px; 
     height: 100% !important;
   
}
li.el-menu-item{
    text-align: left;
    padding-left: 100px !important;
}
.MuneList{
    margin-left: 32px;
}
  .text {
    font-size: 16px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width:300px;
  }
  .samheader {
    /* height: 60px; */
    margin-top: 15px;
    padding: 15px 0;
    font-size: 20px;
    color: #fff;
    background-color: #5e88c2;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}
/* 面包屑 */
.el-breadcrumb{
  display: flex;
  justify-content:flex-start;
  vertical-align:middle
}
.breadcrumb{
  /* line-height: 40px; */
  margin-top: 12px;
}
.localtionicon{
  margin-right: 12px;
}
/* main */

</style>